<template>
  <span>
    <div class="casesRanking-box" @click="dialogVisible = true">
      <div class="subtitle-short casesRanking-titleSize">事故案件排行(2022年)</div>
      <div class="casesRanking-icon">
        <div class="casesRanking-icon-img"/>
        <div class="casesRanking-icon-word">案件总数</div>
        <div class="casesRanking-icon-text1">426<span class="casesRanking-icon-text2">个</span></div>
      </div>
      <dv-scroll-board :config="chartConfig" class="casesRanking-tableSize"/>
    </div>
    <!--  子屏  -->
    <subscreen_casses :dialogVisible="dialogVisible" @closeDialog="closeDialog"/>
  </span>
</template>

<script>
import subscreen_casses from "./subscreen_cases";

export default {
  name: "table_casesRanking",
  components: {subscreen_casses},
  data() {
    return {
      chartConfig: {
        header: ['地区', '案件数', '事故率'],
        data: [
          ['行1列2', '行1列3', '行1列1'],
          ['行1列2', '行1列3', '行1列1'],
          ['行1列2', '行1列3', '行1列1'],
          ['行1列2', '行1列3', '行1列1'],
          ['行1列2', '行1列3', '行1列1'],
          ['行1列2', '行1列3', '行1列1'],
          ['行1列2', '行1列3', '行1列1'],
          ['行1列2', '行1列3', '行1列1'],
          ['行1列2', '行1列3', '行1列1'],
          ['行1列2', '行1列3', '行1列1']
        ],
        index: true,
        indexHeader: '排行',
        columnWidth: [55],
        align: ['center'],
        headerBGC: '#1A293C',
        oddRowBGC: '#041A33',
        evenRowBGC: '#041F3A'
      },
      // 子屏显示标记
      dialogVisible: false
    }
  },
  methods: {
    // 关闭子屏的回调
    closeDialog() {
      this.dialogVisible = false;
    },
  }
}
</script>

<style scoped>
.casesRanking-box {
  width: 100%;
  height: 35%;
}

.casesRanking-titleSize {
  height: 15%;
  line-height: 170%;
}

.casesRanking-icon {
  width: 100%;
  height: 24%;
  color: #FBD533;
}

.casesRanking-icon-img {
  background: url("../assets/data_left_3.png");
  overflow: hidden !important;
  background-size: cover !important;
  height: 100%;
  width: 22%;
  margin-left: 4%;
  float: left;
}

.casesRanking-icon-word {
  float: left;
  color: white;
  font-size: 1.2rem;
  font-weight: 600;
  margin-top: 4%;
}

.casesRanking-icon-text1 {
  display: inline-block;
  float: left;
  width: 13%;
  height: 70%;
  margin-left: 2%;
  margin-top: 4%;
  font-family: LCD2;
  font-size: 1.6rem;
}

.casesRanking-icon-text2 {
  display: inline-block;
  font-size: .8rem;
  margin-top: 5.8%;
}

.casesRanking-tableSize {
  margin-left: 6%;
  width: 94%;
  height: 61%;
}
</style>
